'use strict';
import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
    } from 'react-native';
// jsx语法
class HelloWorld extends React.Component {
    render() {
        return (
            <View style={styles.style_0}>
                <View style={styles.style_1}><Text>自由拜访</Text></View>
                <View style={styles.style_1}></View>
                <View style={{flex:10}}></View>
            </View>
        )
    }
}

class HelloWord2 extends React.Component {

    render() {
        return (
            <View style={[styles.style_0,]}>
                <View style={[styles.view,]}><Text>自由拜访</Text></View>
                <View style={[styles.view, styles.center]}><Text style={[styles.center_vertical]}>居中</Text></View>
                <View style={[styles.view, styles.left]}><Text>居左</Text></View>
                <View style={[styles.view, styles.right]}><Text>居右</Text></View>
                <View style={[styles.view, styles.center_vertical]}><Text>居右</Text></View>
            </View>
        )
    }

}

//布局demo
class MainView extends React.Component {
    render() {
        return (

            <View style={[styles.height_160, styles.row]}>

                <View style={[styles.height_160, styles.part_1_left]}></View>
                <View style={[styles.height_160, styles.part_1_right]}></View>

            </View>

        )
    }
}

//视图样式创建
var styles = StyleSheet.create({


    part_1_left: {
        flex: 1,
        borderWidth: 1,
        borderColor: 'red'
    },
    part_1_right: {
        flex: 2,
        borderWidth: 1,
        borderColor: 'red'
    },
    row: {
        flexDirection: 'row'
    },

    height_160: {
        height: 160
    },
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    center: {
        alignSelf: 'center'
    },
    center_vertical: {
        flex: 1,
        borderColor: 'red',
        alignSelf: 'center'
    },
    left: {
        alignSelf: 'flex-start'
    },
    right: {
        alignSelf: 'flex-end'
    },
    hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: 'red'
    },
    view: {

        borderWidth: 5,
        borderColor: 'blue',
        width: 100,
        height: 40

    },
    pic: {
        width: 100,
        height: 100
    },
    style_0: {
        flex: 1
    },
    style_1: {
        flex: 5,
        height: 40,
        borderWidth: 1,
        borderColor: 'red'
    }

});
//注册应用入口
AppRegistry.registerComponent('HelloWorld', () => MainView);